<template>
  <div class="contactUs">
    <globalhead :mes="mes"></globalhead>
    <div class="MakeConnection">
      <div class="middle">
        <div class="above flclear">
          <div class="showimg">
            <img src="../../assets/contactUs/pexels-brett.png" alt="联系我们" />
          </div>
          <div class="connection">
            <h1>与觅食科技建立联络</h1>
            <p>
              面对老对手俄罗斯面对老对手俄罗斯女排中国是垫付是否发顺丰排一直牢
            </p>
            <form class="form">
              <div>
                <input type="text" id="user" placeholder="你的称呼" />
                <input type="text" id="company" placeholder="你的公司名称" />
                <input type="text" id="phone" placeholder="你的联系电话" />
                <!-- <input type="text" id="content" placeholder="附加内容" /> -->
                <textarea
                  name="content"
                  id="content"
                  cols="30"
                  rows="10"
                  placeholder="附加内容"
                ></textarea>
              </div>
              <button class="btn btnShadow" @click.prevent="">提交联络单</button>
            </form>
          </div>
        </div>
        <div class="below">
          <div class="address">
            <div class="icon btnShadow">
              <img src="../../assets/contactUs/address.svg" alt="" />
            </div>
            <div class="cont ">
              <h2>辽宁省·大连市·金普新区双D港</h2>
              <p>双D港跨境电商产业园4-4-1</p>
            </div>
          </div>
          <div class="phone">
            <div class="icon btnShadow">
              <img src="../../assets/contactUs/phone.svg" alt="" />
            </div>
            <div class="cont">
              <h2>400-600-8000</h2>
              <p>0411-60060000</p>
            </div>
          </div>
          <div class="cooperation">
            <div class="icon btnShadow">
              <img src="../../assets/contactUs/cooperation.svg" alt="" />
            </div>
            <div class="cont">
              <h2><span>技术支持：</span>support@mishihudong.com</h2>
              <p><span>政企合作：</span>just@mishihudong.com</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Map">
      <MyMap></MyMap>
    </div>
  </div>
</template>

<script>
import MyMap from "../../components/Mape.vue"
import globalhead from "../../components/global.vue"
export default {
  components: {
    globalhead,
    MyMap
  },
  data() {
    return {
      mes: "联系我们"
    }
  }
}
</script>

<style scoped lang="scss">
.contactUs {
  width: 100%;
  .MakeConnection {
    //联系我们部分

    margin-top: 30px;
    .middle {
      width: 1530px;
      margin: 0 auto;
      .above {
        width: 100%;
        height: 725px;
        background: #ffffff;
        box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
        .showimg {
          width: 750px;
          height: 100%;
          float: left;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .connection {
          overflow: hidden;
          box-sizing: border-box;
          padding: 44px 90px 46px 60px;
          h1 {
            height: 35px;
            font-size: 26px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            line-height: 35px;
            margin-bottom: 11px;
          }
          p {
            height: 35px;
            font-size: 16px;
            color: rgba(1, 1, 1, 0.75);
            line-height: 35px;
          }
          .form {
            margin-top: 44px;
              input {
                //   width: 290px;
                height: 60px;
                background: #ffffff;
                border-radius: 5px;
                border: 1px solid #d2d2d2;
                outline: none;
                font-size: 16px;
                padding: 0 20px;
                box-sizing: border-box;
                margin-bottom: 20px;
                transition: all 0.5s;
                transform: translateY(0);
                &:not(:placeholder-shown) {
                  border: 1px solid #03a9f4;
                  + .g_button_search {
                    opacity: 1;
                  }
                }
                &:placeholder-shown {
                  + .g_button_search {
                    opacity: 0;
                  }
                }
                &:focus-within {
                  transform: translateY(-4px);
                  box-shadow: 4px 4px 10px 2px #ddd;
                }
              }
              #content {
                height: 265px;
                width: 100%;
                background: #ffffff;
                border-radius: 5px;
                border: 1px solid #d2d2d2;
                outline: none;
                font-size: 16px;
                padding: 20px;
                box-sizing: border-box;
                resize: none;
                font-family: PingFangSC-Regular, PingFang SC;
                transition: all 0.5s;
                &:not(:placeholder-shown) {
                  border: 1px solid #03a9f4;
                  + .g_button_search {
                    opacity: 1;
                  }
                }
                &:placeholder-shown {
                  + .g_button_search {
                    opacity: 0;
                  }
                }
                &:focus-within {
                  transform: translateY(-4px);
                  box-shadow: 4px 4px 10px 2px #ddd;
                }
              }
              .btn {
                width: 165px;
                height: 55px;
                background: #0054f7;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 500;
                color: #ffffff;
                line-height: 55px;
                text-align: center;
                outline: none;
                border: none;
                margin-top: 15px;
                cursor: pointer;
              }
              #user,
              #company {
                width: 300px;
              }
              #user {
                margin-right: 30px;
              }
              #phone {
                width: 100%;
              }
            
          }
        }
      }
      .below {
        width: 100%;
        display: inline-flex;
        justify-content: space-around;
        background: #ffffff;
        box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
        height: 155px;
        align-items: center;
        margin: 50px 0 80px;
        // padding: 47px 0;
        > div {
          height: 60px;
          .icon {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background: #0054f7;
            border-radius: 20px;
            float: left;
            margin-right: 30px;
            img {
              width: 30px;
              height: 30px;
              vertical-align: middle;
              transform: translate(0);
            }
          }

          .cont {
            float: left;
            vertical-align: middle;
            h2 {
              font-size: 22px;
              font-weight: 500;
              font-family: PingFangSC-Semibold, PingFang SC;
              line-height: 32px;
            }
            p {
              font-size: 18px;
              font-family: PingFangSC-Semibold, PingFang SC;
              color: rgba(0, 0, 0, 0.85);
              line-height: 24px;
            }
          }
        }
        > div::after {
          content: "";
          display: block;
          clear: both;
        }
        .cooperation {
          span {
            font-weight: 500;
          }
        }
      }
    }
  }
  .Map {
    width: 100%;
    box-sizing: border-box;
  }
}
</style>